<template>
  <div class="hello" v-if="render">
    <grid-layout
      :layout.sync="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :responsive="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in layout"
        class="grid-item"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        @resized="resizeEvent"
      >
        <vue-scroll
          :ops="ops"
          class="portlet"
          :key="item.pindex"
          @handle-resize="handleResize"
          @mouseenter.native="addBarListener"
        >
          <component v-bind:is="item.temp"></component>
        </vue-scroll>
      </grid-item>
    </grid-layout>
    <nuxt-link to="/" class="button--green">首页1</nuxt-link>
  </div>
</template>

<script>
import Vue from 'vue'
const VueGridLayout = require('~/static/js/vue-grid-layout.common')
import VueScroll from 'vuescroll'
export default {
  name: 'HelloWorld',
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    VueScroll,
  },
  data() {
    return {
      componentName: '',
      render: false,
      layout: [
        { x: 0, y: 0, w: 12, h: 7, i: '0', id: 0, temp: 'HeaderIndex' },
        { x: 0, y: 7, w: 12, h: 15, i: '1', id: 1, temp: 'CludeDetial' },
        { x: 0, y: 22, w: 12, h: 2, i: '2', id: 2, temp: 'NewFooter' },
      ],
      ops: {
        rail: {
          opacity: '0',
          //size: '10px'
        },
        bar: {
          onlyShowBarOnScroll: false,
          background: '#909399',
          size: '4px',
        },
      },
    }
  },
  computed: {},
  created() {
    if (process.client) {
    }
  },
  mounted() {
    console.log(location)
    this.render = true
    // 小组件注册
    const componentGroup = require('~/components/componentStore/portlets')
    for (let i in componentGroup.default) {
      componentGroup.default[i].forEach((component) => {
        // installed组件有没有注册过
        if (!component.installed) {
          Vue.component(component.templateName, component.template)
          component.installed = true // 设置此组件已被注册
        }
      })
    }
  },
  methods: {
    resizeEvent(i, newH, newW, newHPx, newWPx) {
      console.log("大小正在改变",i, newH, newW, newHPx, newWPx);
    },
    handleResize() {},
    // 防止部件拖拽事件跟滚动条拖动冲突
    addBarListener() {
      let that = this
      let bars = process.client
        ? document.querySelectorAll('.__bar-is-vertical, .__bar-is-horizontal')
        : {}
      for (let i = 0; i < bars.length; i++) {
        bars[i].addEventListener('mouseover', function () {
          that.draggable = false
        })
        bars[i].addEventListener('mouseout', function () {
          that.draggable = true
        })
      }
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.grid-item {
  border: 1px solid red;
}
</style>
